<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>答题页面</title>
</head>

<body>
    <div class="main-container">
        <!-- 左半区-答题区 -->
        <div class="question-area">
            <div class="question-title">题目</div>
            <div id="question-content" class="question-content"></div>
            <div id="options-grid" class="options-grid"></div>
            <div class="control-bar">
                <a id="return-btn" class="nav-btn return-btn">返回</a>
                <button id="prev-btn" class="nav-btn nav-btn-prev">上一题</button>
                <span class="pager">
                    <span id="page-indicator" class="page-indicator"></span>
                </span>
                <button id="next-btn" class="nav-btn nav-btn-next">下一题</button>
                <button id="submit-btn" class="nav-btn score-btn">提交答案</button>
                <button id="open-modal" class="nav-btn">查看排名</button>
            </div>
        </div>
        <!-- 右半区-解析区 -->
        <div id="analysis-area" class="analysis-area">
            <div class="answer-status">
                <div id="correct-answer" class="correct-answer"></div>
                <div id="user-answer" class="user-answer"></div>
            </div>
            <div id="analysis-text" class="analysis-text"></div>
        </div>
    </div>
    <!-- 遮罩层 -->
    <div id="modal-overlay" class="modal-overlay">
        <div class="modal">
            <div class="modal-header">
                <p>本次得分：<span id="current-score">0</span></p>
                <p>总得分：<span id="total-score"></span></p>
                <p>排名：<span id="rank"></span></p>
            </div>
            <div class="divider"></div>
            <div id="leaderboard" class="leaderboard"></div>
            <div class="modal-footer">
                <button class="btn btn-restart">继续答题</button>
                <button id="close-modal" class="btn btn-close">关闭</button>
            </div>
        </div>
    </div>
    <!-- 提示框 -->
    <div class="alert" id="alert">
        <div class="alert-content">
            <span class="alert-message"></span>
        </div>
    </div>
    <% if(htmlWebpackPlugin.options.useCdn){ %>
        <script src="https://cdn.jsdelivr.net/npm/axios@1.7.9/dist/axios.min.js"></script>
        <% } %>
</body>

</html>